<template>
	<view class="box">
		<view class="part">
			<u-radio :disabled="true" style="margin-top: 11%;padding-left: 3%;"></u-radio>
			<image
				src="https://tse4-mm.cn.bing.net/th/id/OIP-C.3231Qm84BQEv97GnitIpoAHaE7?w=284&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7">
			</image>
			<view class="title">
				<text>全面体检</text>
				<u-input type="text" :border="false" v-model="tex" />
				<view>
					<text>￥199.00</text>
					<u-number-box v-model="value2" @change="valChange" :input-width="60" :input-height="40"
						style="margin-left: 5%	;"></u-number-box>
				</view>
			</view>
		</view>
		<view class="part">
			<u-radio :disabled="true" style="margin-top: 11%;padding-left: 3%;"></u-radio>
			<image
				src="https://tse4-mm.cn.bing.net/th/id/OIP-C.3231Qm84BQEv97GnitIpoAHaE7?w=284&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7">
			</image>
			<view class="title">
				<text>全面体检</text>
				<u-input type="text" :border="false" v-model="tex" />
				<view>
					<text>￥199.00</text>
					<u-number-box v-model="value2" @change="valChange" :input-width="60" :input-height="40"
						style="margin-left: 5%	;"></u-number-box>
				</view>
			</view>
		</view>
		<view class="part">
			<u-radio :disabled="true" style="margin-top: 11%;padding-left: 3%;"></u-radio>
			<image
				src="https://tse4-mm.cn.bing.net/th/id/OIP-C.3231Qm84BQEv97GnitIpoAHaE7?w=284&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7">
			</image>
			<view class="title">
				<text>全面体检</text>
				<u-input type="text" :border="false" v-model="tex" />
				<view>
					<text>￥199.00</text>
					<u-number-box v-model="value2" @change="valChange" :input-width="60" :input-height="40"
						style="margin-left: 5%	;"></u-number-box>
				</view>
			</view>
		</view>
		<view class="footer">
			<view>
				<u-icon name="kefu-ermai" color="#2979ff" size="45" style="padding-left: 2%;"></u-icon>
				<text>客服</text>
			</view>
			<u-button style="width: 85%;padding-top: 2%;padding-left: 2%;">下一步</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tex: "已选择:2022-05-25    ▼",
				value2: 1,
				show: true,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e);
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;
		background-color: white;

		.part {
			width: 100%;
			height: 250rpx;
			padding-top: 3%;
			display: flex;
			border-bottom: 0.5pt solid rgba(144, 144, 144, 0.25);

			image {
				width: 30%;
				height: 200rpx;
				margin-top: 1%;
			}

			.title {
				display: flex;
				flex-direction: column;
				margin-left: 5%;
				padding-top: 2%;

				text {
					font-size: 30rpx;
				}

				u-input {
					background-color: #e6e6e6;
					width: 100%;
					height: 60rpx;
					padding-left: 5%;
					margin-top: 7%;
				}

				view {
					display: flex;
					padding-top: 7%;

					text {
						font-size: 25rpx;
						padding-top: 2%;
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 150rpx;
			background-color: #e6e6e6;
			position: fixed;
			bottom: 0;
			z-index: 1;
			display: flex;
			padding-left: 5%;

			view {
				display: flex;
				flex-direction: column;
				padding-top: 2%;
			}
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep button.u-btn--default {
		background-color: #2979ff;
		color: white;
	}
</style>
